<template>
  <div class="coupon-query">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠券查询统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item label="状态">
          <el-checkbox-group v-model="state">
            <el-checkbox :label="1">未使用</el-checkbox>
            <el-checkbox :label="2">已领取</el-checkbox>
            <el-checkbox :label="3">已使用</el-checkbox>
            <el-checkbox :label="4">已过期</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入活动名称"
            v-model="buyName"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入发放批次"
            v-model="provideName"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入券码、用户ID"
            v-model="search"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="_reset"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-table max-height="550"
            :data="tableData">
            <el-table-column label="编号"
              prop="id">
            </el-table-column>
            <el-table-column label="券码"
              prop="discountNum">
            </el-table-column>
            <el-table-column label="优惠券模版名称">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="lookCoupon(scope.row.couponId)">{{scope.row.couponName}}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="关联活动名称">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="lookActivity(scope.row.buyId)">{{scope.row.buyName}}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="发放批次"
              prop="provideName">
            </el-table-column>
            <el-table-column label="状态"
              prop="state">
            </el-table-column>
            <el-table-column label="领取/使用日期"
              prop="createTime">
            </el-table-column>
            <el-table-column label="关联订单">
              <template slot-scope="scope">
                <div v-if="scope.row.orders.length">
                  <div v-for="item in scope.row.orders "
                    :key="item.id">
                    <el-button type="text"
                      @click="lookOrder(item.id)">{{item.orderNum}}</el-button>
                  </div>
                </div>
                <div v-else>
                  /
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
      <el-dialog title="优惠券详情"
        :visible.sync="dialogVisible"
        width="600px">
        <div class="coupon-detail">
          <p class="title">基础信息</p>
          <div class="content">
            <p>
              <label>优惠券模版名称：</label>
              <span>{{discountCoupon.name}}</span>
            </p>
            <p>
              <label>创建人：</label>
              <span>{{discountCoupon.person}}</span>
            </p>
            <p>
              <label>创建时间：</label>
              <span>{{discountCoupon.createTime}}</span>
            </p>
            <p>
              <label>类型：</label>
              <span>{{discountCoupon.typeName}}</span>
            </p>
            <p>
              <label>金额规则：</label>
              <span>{{discountCoupon.typeMoney}}</span>
            </p>
            <p>
              <label>有效期：</label>
              <span>{{discountCoupon.indate}}</span>
            </p>
            <p>
              <label>退款退券：</label>
              <span>{{discountCoupon.backout}}</span>
            </p>
            <p>
              <label>转让规则：</label>
              <span>{{discountCoupon.turnAllow}}</span>
            </p>

          </div>
          <p class="title">适用规则</p>
          <div class="content">
            <p>
              <label>适用酒店：</label>
              <span>{{discountCoupon.applyName}}</span>
            </p>
            <p>
              <label>适用品类：</label>
              <span>{{discountCoupon.scopeS}}</span>
            </p>
          </div>
        </div>

        <span slot="footer"
          class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCouponsTj,getCouponInfo } from "@/public/js/coupon.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 0,
      state: [1, 2, 3, 4],
      tableData: [],
      search: "",
      buyName: "",
      provideName: "",
      dialogVisible: false,
      discountCoupon: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getCouponsTj() {
      getCouponsTj({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        search: this.search,
        buyName: this.buyName,
        provideName: this.provideName,
        state: this.state
      }).then(res => {
        this.tableData = res.data.statis;
        this.total = res.data.total;
      });
    },
    lookActivity(id) {
      this.$router.push("/index/coupon-add-edit?id=" + id + "&type=" + 1);
    },
    lookCoupon(id) {
      getCouponInfo({ id }).then(res => {
        this.discountCoupon = res.data.discountCoupon;
      });
      this.dialogVisible = true;
    },
    lookOrder(id) {
      this.$router.push("/index/order_detail?id=" + id);
    },
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getCouponsTj();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getCouponsTj();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this._getCouponsTj();
    }
  },
  created() {
    this._getCouponsTj();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.coupon-query {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #6d2377;
  }
  .content {
    padding-left: 50px;
    font-size: 12px;
    font-weight: 500;
    p {
      line-height: 30px;
      label {
        padding-right: 15px;
        font-weight: bold;
      }
    }
  }
}
</style>